<template>
	<div id='shoppingcar'>
		<el-table
		    ref="multipleTable"
		    :data="tableData"
		    tooltip-effect="dark"
		    style="width: 100%"
		    @selection-change="handleSelectionChange">
		    <el-table-column
		      type="selection"
		      width="55">
		    </el-table-column>
		    <el-table-column
		      label="商品"
		      width="120">
		      <template slot-scope="scope">
			  <img :src="scope.row.productPic" alt="">
			  <span>{{scope.row.productName}} {{scope.index}}</span>
			  </template>
		    </el-table-column>
		    <el-table-column
		      prop="price"
		      label="单价"
		      width="120">
		    </el-table-column>
		    <el-table-column
		      prop="quantity"
		      label="数量"
		      show-overflow-tooltip>
		    </el-table-column>
			<el-table-column
			  prop="option"
			  label="操作"
			  show-overflow-tooltip>
			  <template slot-scope="scope">
				  <el-button
					size="mini"
					type="danger"
					@click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		  </el-table>
		  <button id="settle">去结算</button>
	</div>
</template>

<script>
	export default {
	  data () {
		  return {
			  tableData:[],
			  cid:1
		  }
	  },
	  components:{

	  },
	  methods:{
		handleDelete(index, row) {
			   this.tableData.splice(index, 1);
			   this.$axios({
			       method:"post",
			       url:"http://10.11.20.25:8201/mall-portal/cart/delete",
			       data:{
			           ids:1
			       }
			   }).then((res)=>{
			       console.log(res.data);
			   })
			}
	  },
	  mounted() {
	  	var that = this ;
		this.axios.get('http://10.11.20.25:8201/mall-portal/cart/list/promotion'+that.sid)
		.then(function (response) {
		  //console.log(response);
		  that.tableData = response.data.data
		})
		.catch(function (error) {
		  console.log(error.response);
		});
	  }
	}
</script>

<style>
	#shoppingcar {
		width: 80%;
		margin-left: 10%;
		margin-top: 100px;
	}
	#shoppingcar img {
		width: 150px;
		height: 150px;
	}
	#settle {
		background-color: #DC143C;
		color: white;
		width: 150px;
		height: 70px;
	}
</style>
